import React from 'react';
import { Icon, Card, Modal } from 'antd';
import ApiTubro from './components/Engineering/ApiTubro';
import ETable from './components/Engineering/ETable';
import SearchControl from './components/Engineering/SearchControl';
import Utils from './components/Engineering/utils';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import axios from './components/Engineering/axios';
import AirtrQuotations from './components/air-trquotations';

@connect(({ loading, searchList }: any) => ({
  searchList,
  loading: loading.models.rule,
}))
export default class AirTransport extends React.Component {
  state = {
    transportDefaultType: 'airTransport', //运输类型默认值
    loadingInvisible: true,
    searchFieldList: [
      {
        type: 'SELECT',
        label: '运输类型',
        field: 'transportType',
        placeholder: '请输入运输类型',
        initialValue: 'airTransport',
        list: [
          { value: 'airTransport', name: '空运' },
          { value: 'seaTransport', name: '海运' },
          {
            value: 'trailer',
            name: '拖车',
          },
          {
            value: 'express',
            name: '快递',
          },
          { value: 'Railway', name: '铁路' },
        ],
        onChange: e => {
          const { dispatch } = this.props;
          this.setState({
            transportDefaultType: e,
          });
          if (e == 'seaTransport') {
            this.props.history.push({ pathname: '/manage/logistics/sea-transport' });
          } else if (e == 'airTransport') {
            this.props.history.push({ pathname: '/manage/logistics/air-transport' });
          }
        },
      },
      {
        type: 'AUTOSELECT',
        label: '启运港',
        field: 'qyg',
        placeholder: '请输入启运港,系统智能匹配',
        list: [],
        onSearch: keywords =>
          this.getSiteData({
            url: `${LOGISTICS_PATH}/web/port/nameType?portType=1`,
            keywords,
            sequence: 1,
          }),
        // onChange: keywords => this.setState({keywords})
      },
      {
        type: 'AUTOSELECT',
        label: '目的港',
        field: 'mdg',
        placeholder: '请输入目的港,系统智能匹配',
        list: [],
        onSearch: keywords =>
          this.getSiteData({
            url: `${LOGISTICS_PATH}/web/port/nameType?portType=1`,
            keywords,
            sequence: 2,
          }),
        // onChange: keywords => this.setState({keywords})
      },

      // {
      //   type: 'AUTOSELECT',
      //   label: '船司',
      //   field: 'berthingId',
      //   placeholder: '请输入船司,系统智能匹配',
      //   list: [],
      //   onSearch: keywords =>
      //     this.getSiteData({
      //       url: `${LOGISTICS_PATH}/api/berthingCompany/all`,
      //       keywords,
      //       sequence: 3,
      //     }),
      //   onChange: keywords => this.setState({ keywords }),
      // },
    ],
  };
  page = {};
  expand = false;

  Columns = [
    {
      title: '起运港/目的港',
      dataIndex: 'changxian',
      key: 'chuanxian',
      render: (text: any, record: any) => (
        <div>
          {record.qyg}({record.qygen}) — {record.hd1mdg}({record.mdgen})
        </div>
      ),
    },
    { title: '航空公司', dataIndex: 'hkgs', key: 'hkgs' },
    { title: '航班', dataIndex: 'hbbq', key: 'hbbq' },
    {
      title: '中转',
      dataIndex: 'wholecosttime',
      key: 'wholecosttime',
      render: text => `时效：${text}天`,
    },
    { title: '45', dataIndex: 'p45', key: 'p45' },
    { title: '100', dataIndex: 'p100', key: 'p100' },
    { title: '300', dataIndex: 'p300', key: 'p4300' },
    { title: '500', dataIndex: 'p500', key: 'p500' },
    { title: '1000', dataIndex: 'p1000', key: 'p1000' },
    {
      title: 'DDU服务',
      dataIndex: 'DDU',
      key: 'DDU',
      render: (text, recoad) => (
        <a
          onClick={() => {
            this.getAirTransportDetailList({ hdpriceId: recoad.hdpriceId, mdg: recoad.mdg });
            this.setState({ loadingInvisible: false });
          }}
        >
          本地费
        </a>
      ),
    },
    {
      title: '操作',
      dataIndex: 'caozuo',
      key: 'caozuo',
      render: (text, record) => {
        return (
          <div>
            <a
              onClick={() => {
                this.props.history.push({
                  pathname: '/manage/logistics/air-online-booking',
                  query: record,
                });
              }}
            >
              <Icon type="edit" style={{ marginRight: 2 }} />
              在线订舱
            </a>
          </div>
        );
      },
    },
  ];

  componentDidMount() {
    this.getListForPage();
    this.getSiteData({
      url: `${LOGISTICS_PATH}/web/port/nameType?portType=1`,
      keywords: 'T',
      sequence: 1,
    });
    this.getSiteData({
      url: `${LOGISTICS_PATH}/web/port/nameType?portType=1`,
      keywords: 'T',
      sequence: 2,
    });
    // this.getSiteData({
    //   url: `${LOGISTICS_PATH}/api/berthingCompany/all`,
    //   keywords: 'T',
    //   sequence: 3,
    // });
  }

  getListForPage = (params: any) =>
    ApiTubro.getListForPage.bind(this)({
      url: `${PORTAL_PATH}/api/air/quotations`,
      data: this.page,
    });

  //更改searchFieldList的状态
  async getSiteData({ url, keywords, sequence = 1 }) {
    let res = await axios.ajax({
      url: url,
      params: { name: keywords },
    });
    let transferDeposit = [];
    res.content &&
      res.content.list.map(item =>
        transferDeposit.push({
          value: item.id,
          name: `${item.portNameEn || item.berthingNameEn}(${item.portName || item.berthingName})`,
        }),
      );
    this.state.searchFieldList[sequence].list = transferDeposit;
    this.setState({
      searchFieldList: this.state.searchFieldList,
    });
  }

  async getAirTransportDetailList(pamars) {
    let res = await axios.ajax({
      url: `${PORTAL_PATH}/api/air/trquotations/detail`,
      params: pamars,
    });
    res.content &&
      this.setState({
        airtrQuotations: res.content,
        airtrQuotationsVisable: true,
        loadingInvisible: true,
      });
  }

  render() {
    const { content } = this.props.searchList;
    return (
      <PageHeaderWrapper>
        <Card>
          <SearchControl searchFieldList={this.state.searchFieldList} {...ApiTubro.mapping(this)} />
          <h4 style={{ color: 'red' }}>* 注：如无特殊说明以下海运费币种均以USD为准。</h4>
          <div className="content-wrap">
            {this.state.transportDefaultType == 'airTransport' && (
              <ETable
                loading={!this.state.loadingInvisible}
                columns={this.Columns}
                updateSelectedItem={Utils.updateSelectedItem.bind(this)}
                selectedRowKeys={this.state.selectedRowKeys}
                // dataSource={this.props.searchList.content.list}
                dataSource={this.state.pageListData}
                pagination={this.state.pagination}
              />
            )}
          </div>
        </Card>

        <Modal
          width={800}
          title="DDU服务"
          visible={this.state.airtrQuotationsVisable}
          cancelText="取消"
          onCancel={() => {
            this.setState({
              airtrQuotationsVisable: false,
            });
          }}
        >
          <AirtrQuotations airtrQuotations={this.state.airtrQuotations || {}} />
        </Modal>
      </PageHeaderWrapper>
    );
  }
}
